<template>
  <div id="email-login">
    <div class="email-login2">
      <div style="margin-left: 450px;margin-top: 30px">
        <p style="color:#9b9b9b">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;QQ群：218851843</p>
        <img :src="imgUrl" width="200px">
        <p style="color:#9b9b9b">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;有疑问加群咨询</p>
      </div>
      <div style="margin-top: -300px">
        <h2>用户登录</h2>
        <el-form ref="form" :model="form" label-width="">
          <el-form-item>
            <el-input v-model="form.email" style="width: 300px;" placeholder="请输入邮箱"
                      prefix-icon="el-icon-s-promotion"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.vcode" style="width: 300px;" placeholder="请输入验证码" prefix-icon="el-icon-loading">
              <el-button style="padding-right:10px" slot="suffix" type="text" @click="created(form.email)">获取验证码
              </el-button>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 300px" @click="login(form.email,form.vcode)">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-link type="info" style="margin-top: 50px;margin-left: 120px" :underline="false" @click="returnUrl()">返回>
      </el-link>
    </div>
  </div>
</template>

<script>
import axios from "axios";


export default {
  name: "EmailLogin",
  data() {
    return {
      form: {
        email: '',
        vcode: ''
      },
      imgUrl: require("@/assets/qrcode.jpg")
    }
  },
  methods: {

    returnUrl() {
      this.$router.push('Login')
    },
    created(email) {
      //这里直接在created函数中使用axios的get请求向后台获取用户信息数据
      // 在实际开发中可以卸载apiadress.js中配置具体的method对应的路径和接口，这个
      //后面完善功能的情况下再进行介绍
      if (email == '') {
        this.$alert('邮箱未输入', '错误', {
          confirmButtonText: '确定',
        });
      } else {
        axios('/open/email', {
          params: {
            userEmail: email
          },
          method: "post"
        }).then(res => {
          console.log(res.data)
        }).catch(function (error) {
          console.log(error);
        });
      }
    },
    login(email, vcode) {
      if (email == '') {
        this.$alert('邮箱未输入', '错误', {
          confirmButtonText: '确定',
        });
      } else if (vcode == '') {
        this.$alert('验证码未输入', '错误', {
          confirmButtonText: '确定',
        });
      } else {
        axios('/open/login/email', {
          params: {
            userEmail: email,
            emailCode: vcode
          },
          method: "post",
        }).then(res => {
          console.log(res.data)
          let userInfo = {
            userId:res.data.data.userId,
            userName: res.data.data.userName,
            userGender: res.data.data.userGender,
            userTel: res.data.data.userTel,
            userPassword: res.data.data.userPassword,
            userEmail: res.data.data.userEmail,
            schoolName: res.data.data.school.schoolName,
            userHead:res.data.data.userHead,
            studentCollege:res.data.studentClass.studentCollege,
            studentClassGrade:res.data.studentClass.studentClassGrade,
            studentClassMajor:res.data.studentClass.studentClassMajor,
            studentClassNumber:res.data.studentClass.studentClassNumber,
            studentClassIndex:res.data.studentClass.studentClassIndex,
          }
          this.$store.commit('updateUser', userInfo)
          this.$store.commit('updateuserId',userInfo.userId)
          this.$router.push('/Home/Course')
        }).catch(function (error) {
          console.log(error);
        });
      }
    }
  }
}
</script>

<style scoped>

#email-login {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #e6e6e6;
}

.email-login2 {
  border-radius: 20px;
  margin-left: 23%;
  margin-top: 6%;
  padding: 80px;
  background: white;
  box-shadow: 4px 4px 4px #ccc;
  width: 700px;
  height: 360px;
}

</style>
